<template>
       <div class="other">
          <div class="hot">
            <div class="hot-l">
                <span class="iconfont">&#xe601;</span>
                <span>定位失败</span>
            </div>
            <div class="hot-r">
                <span class="iconfont">&#xe613;</span>
                <span>必游榜单</span>
            </div>
          </div>

         <div class="hot-line"></div>
         <div class="bdan">
                <div class="bdan-top">
                    <div class="bdan-top-l">
                        <span class="iconfont">&#xe656;</span>
                        <span>本周热门榜单</span>
                    </div>
                    <span>全部榜单></span>
                </div>

                <div class="bdan-xq">
                    <ul class="bdan-xq-main" v-for="(item,index) in hotJd" :key="item.id">
                        <li>
                          <img :src="item.imgUrl"/>
                          <p>{{item.desc}}</p>
                          <p>￥<span style="color: orange">{{item.price}}</span>元起</p>
                        </li>
                    </ul>
                </div>
         </div>

         <div class="hot-line"></div>

         <!--猜你喜欢-->
         <div class="like">
             <div class="like-top">
                 <span class="iconfont">&#xe620;</span>
                 <span>猜你喜欢</span>
             </div>

              <router-link
                class="like-xq-main"
                :to="'/detail/'+item.id"
                v-for="(item,index) in yLike"
                :key="item.id">
                     <img class="like-xq-l" :src="item.imgUrl"/>
                     <div class="like-xq-r">
                       <p class="like-xq-r-name">{{item.desc}}</p>
                       <div class="like-xq-xing">
                           <p>
                             <span class="iconfont">&#xe61b;</span>
                             <span class="iconfont">&#xe61b;</span>
                             <span class="iconfont">&#xe61b;</span>
                             <span class="iconfont">&#xe61b;</span>
                             <span class="iconfont">&#xe61b;</span>
                           </p>
                         <p><span>{{item.num}}</span>条评论</p>
                       </div>
                       <p class="like-xq-address">
                         <span><span class="price">￥</span><span class="value">{{item.price}}</span>起</span>
                         <span>{{item.address}}</span>
                       </p>
                       <div class="like-xq-intrduce">{{item.text}}</div>
                     </div>
                   </router-link>
         </div>
       </div>
</template>

<script>
    export default {
        name: "Other",
        props: {
          hotJd: {
             type: Array
          },
          yLike: {
            type: Array
          }
        },
        data (){
           return {
             // hotbdan:[
             //   {
             //     "id": "0001",
             //     "imgUrl": "http://img1.qunarzz.com/sight/p0/1409/19/adca619faaab0898245dc4ec482b5722.jpg_250x250_0fc722c0.jpg",
             //     "desc": "故宫",
             //     "price": 14
             //   },
             //   {
             //     "id": "0002",
             //     "imgUrl": "http://img1.qunarzz.com/sight/p0/1708/2b/2b3b94de99c0a425a3.img.jpg_250x250_50c99cf3.jpg",
             //     "desc": "八达岭长城",
             //     "price": 350
             //   },
             //   {
             //     "id": "0003",
             //     "imgUrl": "http://img1.qunarzz.com/sight/p0/1501/40/40b2b6c951b28fdd.water.jpg_250x250_ecfa0df2.jpg",
             //     "desc": "水立方",
             //     "price": 250
             //   },
             //   {
             //     "id": "0004",
             //     "imgUrl": "http://img1.qunarzz.com/sight/p0/1511/d2/d2aec2dfc5aa771290.water.jpg_250x250_7b67daa3.jpg",
             //     "desc": "南山滑雪场",
             //     "price": 250
             //   },
             //   {
             //     "id": "0005",
             //     "imgUrl": "http://img1.qunarzz.com/sight/p0/1511/d2/d2aec2dfc5aa771290.water.jpg_250x250_7b67daa3.jpg",
             //     "desc": "南山滑雪场",
             //     "price": 250
             //   }
             // ],
             // yLike: [
             //   { "id": "0001",
             //     "imgUrl": "http://img1.qunarzz.com/sight/p0/1712/71/71ace1aa7d971212a3.water.jpg_200x200_9638020d.jpg",
             //     "desc": "渔阳滑雪场",
             //     "num": 532,
             //     "price": 79.5,
             //     "address": "平谷区",
             //     "text": "世界五大宫之首,穿越与您近在咫尺"
             //   },
             //   { "id": "0002",
             //     "imgUrl": "http://img1.qunarzz.com/sight/p0/1409/19/adca619faaab0898245dc4ec482b5722.jpg_200x200_1bc99086.jpg",
             //     "desc": "故宫",
             //     "num": 345,
             //     "price": 345.5,
             //     "address": "东城区",
             //     "text": "世界五大宫之首,穿越与您近在咫尺"
             //   },
             //   { "id": "0003",
             //     "imgUrl": "http://img1.qunarzz.com/sight/p0/1709/e4/e48857f2ce5e53a7a3.img.jpg_200x200_8ee069fe.jpg",
             //     "desc": "远去的恐龙",
             //     "num": 23535,
             //     "price": 45.5,
             //     "address": "东城区",
             //     "text": "一部不可思议的巨制演绎作品"
             //   },
             //   { "id": "0004",
             //     "imgUrl": "http://img1.qunarzz.com/sight/p0/1602/67/67feeab24cfc82bb90.water.jpg_200x200_af2a01b1.jpg",
             //     "desc": "太平洋海底世界",
             //     "num": 334545,
             //     "price": 345.5,
             //     "address": "西城区",
             //     "text": ""
             //   },
             //   { "id": "0005",
             //     "imgUrl": "http://img1.qunarzz.com/sight/p0/1507/36/ce3d2d6c9ab44d67ae68d940b8781829.water.jpg_200x200_0938a8f2.jpg",
             //     "desc": "北京野生动物园",
             //     "num": 3434645,
             //     "price": 66,
             //     "address": "大兴区",
             //     "text": "敢于从林之王近距离接触吗？"
             //   }
             // ]
           }
        }
    }
</script>

<style lang="stylus" scoped>
     .other
        height: 100%
        padding-bottom .30rem
        //热门
        .hot
          height:.5rem
          line-height .5rem
          display: flex
          justify-content space-around
          text-align: center
          .hot-l
             width: 50%
             margin: 0rem .10rem
             display inline-block
             border-right: 1px solid #cacaca
          .hot-r
            width: 50%
            margin: 0rem .10rem
       .hot-line
           width: 100%
           height: .08rem
           background : #F5F5F5

         //榜单
       .bdan
         height: 1.60rem
         .bdan-top
           height:.4rem
           line-height .4rem
           display: flex
           justify-content space-between
           margin-left : .10rem
           span{
              margin-right .10rem
           }
           .bdan-top-l
                font-size: .16rem
       //滑动部分
         .bdan-xq
            display flex
            margin-left : .10rem
            overflow-x : scroll
            white-space: nowrap
           .bdan-xq-main
              li
                 width: .80rem
                 display flex
                 flex-direction column
                 text-align center
                 padding-right : .10rem
                 img{
                   width: .80rem
                 }
                 p{
                   margin: .03rem auto
                 }

//     猜你喜欢
       .like
         .like-top
           height:.5rem
           line-height : .5rem
           margin-left : .10rem
           font-size .18rem
           span:first-of-type{
             color : #FF5D55
           }
         .like-xq-main
             height: 1.10rem;
             display flex
             justify-content flex-start
             align-items center
             .like-xq-l
                 width: .80rem
                 height:.80rem
                 margin: 0rem .10rem
             .like-xq-r
                 width: 2.50rem
                 height: .80rem
                 line-height .20rem
                 .like-xq-r-name
                     font-size : .18rem
                 .like-xq-xing
                     display : flex
                     justify-content flex-start
                     height : .38rem
                     align-items center
                     p:first-of-type{
                        color orange
                        font-size .06rem
                        margin-right .15rem
                     }
                 .like-xq-address
                   display : flex
                   justify-content space-between
                   .price{
                      color orange
                   }
                   .value{
                      color orange
                      font-size .26rem
                   }
                   span:last-of-type{
                      font-size .12rem
                      letter-spacing .01rem
                   }
                 .like-xq-intrduce
                     width: 100%
                     line-height : .30rem
                     height : .3rem
                     color : #25a4bb
                     font-size : .14rem
</style>
